<template>
  <Layout>
    <Content>
      <Row  class="ppt_body" :gutter="15" style="margin: 0">
        <i-col span="24" style="padding: 0">
          <Card :bordered="false" dis-hover>
            <div slot="title">
              {{file_data.file_name}} <span > &nbsp;</span>

              <Button size="small" style="float: right;margin-top: -5px;"  type="error" @click="$router.back()">返回文件列表</Button>
              <Button v-show="unaudit_btn" size="small" style="float: right;margin-top: -5px; margin-right: 5px"  type="warning" @click="audit_file()">反审核</Button>
              <Button v-show="display_dow !=='none'" size="small" style="float: right;margin-top: -5px; margin-right: 5px"  type="success" @click="dow_modal = true">下载</Button>
              <ButtonGroup  size="small" shape="circle" style="float: right;margin-top: -5px;margin-right: 10px">
                <Button   @click="scale_fn(0)">缩小</Button>
                <Button   @click="scale_fn(1)">放大</Button>
              </ButtonGroup>
            </div>
            <!--<div v-if="fileType === 'PDF' || fileType === 'TXT'" @mousewheel="handleScroll" style="text-align: center">-->
            <div v-if="fileType === 'PDF' || fileType === 'TXT'" style="text-align: center">

              <pdf  style="display: none;"
                     class="pdf_body"
                    :src="src"
                    :page="currentPage"
                    @num-pages="pageCount=$event"
                    @page-loaded="currentPage=$event"></pdf>

              <pdf  :style="{width: scale_number +'%' ,margin: '0 auto 20px'}" v-for="i in pageCount" :src="src" :key="i" :id="i" :page="i"></pdf>
              <!--<div style="padding: 15px;text-align: right" @keyup.down="changePdfPage (1)">
                <Page show-elevator
                      :current ='currentPage'
                      :total="pageCount"
                      :page-size="1"
                      size="small"
                      @on-change="change_page"/>
              </div>-->
            </div>


            <div v-else-if="fileType === 'PNG' || fileType === 'JPEG' || fileType === 'JPG' || fileType === 'GIF'">

              <!--<div style="padding: 15px;text-align: center;margin: 0 auto" >
                <ButtonGroup  size="small" shape="circle">
                  <Button   @click="scale_fn(0)">缩小</Button>
                  <Button   @click="scale_fn(1)">放大</Button>
                </ButtonGroup>
              </div>-->
              <div :style="{width: scale_number +'%' ,margin: '0 auto'}">
                <img  :src="src" :key="src" alt="" style="width: 100%">
              </div>
            </div>

            <div v-else-if="fileType === 'MP3' || fileType === 'MP4' || fileType === 'FLV' || fileType === 'AVI' ||
             fileType === 'RMVB' || fileType === 'MPG' || fileType === 'MTS'">
              <video :src="video_src" controls="controls" width="100%">
                该视屏格式不能播放，请下载后自行打开。
              </video>
            </div>

            <Alert v-else type="success" style="text-align: center;font-size: 25px;line-height: 90px;">该种文件类型不支持预览，请自行下载查看。</Alert>



          </Card>
        </i-col>

        <Spin fix  v-if="spinShow">
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>文件加载中...</div>
        </Spin>
      </Row>
    </Content>
    <Modal
        v-model="dow_modal"
        width="260"
        title="提示">

     <p>确定下载该文件吗？</p>
      <div slot="footer">
        <Button  size="large" @click="dow_modal = false">取消</Button>
        <a :href="file_src" download=""><Button  size="large" type="primary">确定</Button></a>
      </div>
    </Modal>
    <BackTop style="z-index: 1000"></BackTop>
  </Layout>
</template>

<script>
  import pdf from 'vue-pdf'
  export default {
    name: 'FileView',
    components: {pdf},
    created: function () {
      var _this = this;
      document.onkeydown = function (e) {
        let key = window.event.keyCode;
        if (key == 40) {
          _this.changePdfPage(1);
        } else if (key == 38) {
          _this.changePdfPage(0);
        }
      };
    },
    data() {
      return {
        file_id: '',
        file_src: '',
        numPages: 0,
        display_dow: 'none',
        scale_number: 80, //初始放大倍数
        spinShow: true,//加载提示
        dow_modal: false,//下载提示
        btnFlag: false,//返回顶部按钮
        unaudit_btn: false,//是否显示反审核按钮
        currentPage: 1, // pdf文件页码
        pageCount: 0, // pdf文件总页数
        fileType: 'PDF', // 文件类型
        src: '', // pdf文件地址
        file_data: {
          file_name: '',
        },
        file_class: [],
        old_file_class: [],
        index_number: 0,//默认第一次访问第一个文件
        video_src: '',
        user_Data: {id: 0},
      }
    },
    methods: {
      getBtnList() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/10/16 21:36
        *=======================================================
        *@function  获取页面按钮
        *=====================================================*/
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/Menu/getBtnList',
          data: {
            menu_id: 96,
            user_id: this.user_Data.id
          }
        }).then(function (res) {
          var json = res.data;

          if (json.status) {
            if (json.btn_list.indexOf('unaudit') !== -1) {
              this.unaudit_btn = true
            } else {
              this.unaudit_btn = false
            }
          } else {
            this.unaudit_btn = false
          }

        }.bind(this)).catch(function (err) {
//          this.$Notice.error({title: '操作失败', desc: '错误：' + err});
        }.bind(this))


      },
      audit_file() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/10/15 16:52
        *=======================================================
        *@function  审核文件
        *=====================================================*/
        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/File/auditFile',
          data: {
            state: "Disable",
            id: this.file_id
          }
        }).then(function (res) {
          var json = res.data;
          console.log(res.data)
          if (json.status) {
            this.$Notice.success({title: json.msg});
          } else {
            this.$Notice.error({title: json.msg});
          }
        }.bind(this)).catch(function (err) {
          this.$Notice.error({title: '审核失败', desc: '错误：' + err});
          this.isLoading = false;
        }.bind(this))
      },
      changePdfPage(val) {
        // console.log(val)
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
          // console.log(this.currentPage)
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
          // console.log(this.currentPage)
        }
      },
      scale_fn(val) {
        if (val === 0 && this.scale_number > 10) {
          this.scale_number -= 10
        }
        if (val === 1 && this.scale_number < 100) {
          this.scale_number += 10
        }
      },
      change_page(page) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/11 17:18
        *=======================================================
        *@function  选择页数时触发
        * page  当前选择的页数
        *=====================================================*/
        this.currentPage = page;
      },
      select_file(index) {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/11/19 10:57
        *=======================================================
        *@function  选择文件
        *=====================================================*/
        this.index_number = index;

        this.getFile_data();

      },
      getFile_data() {
        /*======================================================
        *@author wf_Huang
        *@Time 2018/6/12 11:36
        *=======================================================
        *@function  获取文件
        *=====================================================*/
        this.spinShow = true;
        this.currentPage = 1;
        this.file_id = this.$route.query.file_id;

        this.$http({
          method: 'post',
          url: this.CD_.qj_url + 'index/File/getFileView',
          data: {
            file_id: this.file_id,
            index: this.index_number
          }
        }).then(function (res) {
          var json = res.data;

          this.old_file_class = json.file_data.old_file_class.split(",");
          this.file_class = json.file_data.file_class.split(",");

          this.fileType = this.file_class[0];

          console.log(this.fileType);

          if (json.status) {
            if (this.fileType === 'MP4' || this.fileType === 'FLV'
              || this.fileType === 'RMVB' || this.fileType === 'MPG' || this.fileType === 'AVI'
              || this.fileType === 'MTS' || this.fileType === 'MP3') {

              if (window.location.host != '127.0.0.1:8080') {
                this.video_src = 'http://' + window.location.host + json.file_data.file_src;
              } else {
                this.video_src = this.CD_.file_src + json.file_data.file_src;
              }


              if (this.fileType !== 'MP3') {
                var index = this.video_src.lastIndexOf("\.")
                this.video_src = this.video_src.substring(0, index + 1) + 'MP4';
              }
              console.log(this.video_src);
            } else {
              this.src = json.base64_file;
            }

            this.file_data = json.file_data;
          } else {
            this.$Notice.error({title: '文件不存在~~~'});
          }
          this.spinShow = false;
        }.bind(this)).catch(function (err) {
          this.$Notice.error({
            title: '文件加载失败',
            duration: 20,
            desc: '此文件可能存在问题，如果是office文件请将文件另存为高版本，并去【文件审核】中删除此文件，再次上传。'
          });
          this.spinShow = false;

          this.fileType = 'TSWZ';
        }.bind(this))

      },
      handleScroll(e) {
        if (e.deltaY > 0) {
          this.changePdfPage(1);
        } else {
          this.changePdfPage(0);
        }

      }
    },
    mounted() {
      this.CD_.user_Data = JSON.parse(window.localStorage.getItem('user_Data'));
      this.user_Data = this.CD_.user_Data;
      this.display_dow = this.$route.query.display_dow ? this.$route.query.display_dow : 'none';
      this.file_src = this.$route.query.file_src ? this.$route.query.file_src : '#';
      this.getFile_data();
      this.getBtnList(); //判断是否能反审核
      var _this = this
    }
  }
</script>


<style scoped>
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
  }
  .demo-spin-col{
    height: 100px;
    position: relative;
    border: 1px solid #eee;
  }

  .video-js .vjs-big-play-button{
    border-radius: 150px;
    color: #000000;
  }

  .ppt_body{
    /*position: fixed;*/
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 888;
    overflow: auto;
  }

</style>
